<html>

<head>
  <meta charset="UTF-8">
  <title>TWaver Demo</title>
  <style>
  /*https://webdesign.tutsplus.com/tutorials/solving-problems-with-css-grid-and-flexbox-the-card-ui--cms-27468*/

  html {
    background: #f5f7f8;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 20px 0;
  }

  .band {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
  }

  .item-4 {
    font-size: 20px;
  }

  @media only screen and (min-width: 500px) {
    .band {
      grid-template-columns: 1fr 1fr;
    }
    .item-1 {
      grid-column: 1/ span 2;
    }
    .item-1 h1 {
      font-size: 30px;
    }
    .item-4 {
      grid-column: 1/ span 2;
    }
  }

  @media only screen and (min-width: 850px) {
    .band {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .item-4 {
      grid-column: 1/ span 4;
    }
  }
  /* card */

  .card {
    min-height: 100%;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #444;
    position: relative;
    top: 0;
    transition: all .1s ease-in;
  }

  .card:hover {
    top: -2px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  }

  .card article {
    padding: 20px;
    display: flex;

    flex: 1;
    justify-content: space-between;
    flex-direction: column;
  }

  .card .thumb {
    padding-bottom: 60%;
    background-size: cover;
    background-position: center center;
  }

  .card p {
    flex: 1;
    /* make p grow to fill available space*/
    line-height: 1.4;
  }
  /* typography */

  h1 {
    font-size: 16px;
    margin: 0;
    color: #333;
  }

  .card span {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 2em 0 0 0;
  }
  </style>
</head>

<body>
  <div class="support-grid"></div>
  <div class="band">
    <h1 class="item-4">矢量图</h1>
    <div>
      <a href="./demo/vectorimage-1.html" target="_blank" class="card">
        <div class="thumb" style="background-image: url(./screenshot/vectorimage-1.png);"></div>
        <article>
          <h1>定制矢量图 双轨迹环绕</h1>
        </article>
      </a>
    </div>
    <div>
      <a href="./demo/flowlink-1.html" target="_blank" class="card">
        <div class="thumb" style="background-image: url(./screenshot/flowlink-1.png);"></div>
        <article>
          <h1>Flow Link</h1>
        </article>
      </a>
    </div>
    <div>
      <a href="./demo/flowlink-2.html" target="_blank" class="card">
        <div class="thumb" style="background-image: url(./screenshot/flowlink-2.png);"></div>
        <article>
          <h1>Flow Link</h1>
        </article>
      </a>
    </div>
</body>

</html>